<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>    
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
    	<head>
    	<link href="<c:url value="/resources/homepage.css" />" rel="stylesheet">
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Sprint Planning</title>
	<script src="<c:url value="/resources/jquery-1.11.1.min.js" />"></script>
	<script type="text/javascript">
		$(function(){
	if ( $('table.body_scroll').length ) 
	{
    		var $table_body_scroll=$('table.body_scroll'),
        	header_table=$( '<table aria-hidden="true" class="header_table"><thead><tr><th></th></tr></thead></table>' ),
        	scroll_div='<div class="body_scroll"></div>';
        
    		//inject table that will hold stationary row header; inject the div that will get scrolled
    		$table_body_scroll.before( header_table ).before( scroll_div );
    
    		$table_body_scroll.each(function (index) 
		{
        		var columnWidths = [];
        		var $targetDataTable=$(this);
        		var $targetHeaderTable=$("table.header_table").eq(index);
        
        		// Get column widths
        		$($targetDataTable).find('thead tr th').each(function (index) 
			{
            			columnWidths[index] = $(this).width();
        		});
        
        		//place target table inside of relevant scrollable div (using jQuery eq() and index)
        		$('div.body_scroll').eq(index).prepend( $targetDataTable ).width( $($targetDataTable).width()+10 );
        
        		// hide original header, from users
        		$($targetDataTable).children('thead').hide();
        
        		// insert header data into static table
        		$($targetHeaderTable).find('thead').replaceWith( $( $targetDataTable ).children('thead').clone().show() );
        
        		// modify column width for header
        		$($targetHeaderTable).find('thead tr th').each(function (index) 
			{
            			$(this).css('width', columnWidths[index]);
        		});
        
        		// make sure table data still lines up correctly
        		$($targetDataTable).find('tbody tr:first td').each(function (index) 
			{
            			$(this).css('width', columnWidths[index]+35);
        		});
    		});
   	}
});
	</script>
</head>
<body>
<!-- ============ HEADER SECTION ============== -->
	<div id="header">
		<div id="headerlogo">
		</div>
	</div>
<!-- ============ NAVIGATION SECTION ============== -->
		<div id="menubar">

			<ul>
			<li><a href="Project">Projects</a></li>
					<li><a href="Backlog">Backlog</a></li>
					<li><a href="SprintPlanning" ><span class="currentLink">Sprint Planning</span></a></li>
					<li><a href="Storyboard1">Sprint Tracking</a></li>
					<li><a href="logout">Logout</a></li>
	               <li><a href="#">${username}</a></li>	
	</ul>
		</div>

		<!-- ============ MIDDLE SECTION ============== -->
	
			
	<div id="maincontent">
		<div id="projectitle1">
					<ul>
        	        <li>Project Title : ${project_name}<li>
					<li><input type="text" name="q" size=30 placeholder="search..." style="margin-left:20em;"/></li>
					<li><input type="button" value="search" name="search" class="buttonStyle" /></li>
					</ul>
		</div>

		<div id="rightpanel">
                        <div id="AddFormHeader">
                                <h3>Create Sprint</h3>
                        </div>
                        <div id="AddFormBody">
			<fieldset>
				<form:form action="saveSprint" method="post" modelAttribute="sprint">
				<form:hidden path="sprint_id" value='0'/>
 				<form:hidden path="project_id" value='1'/> 
				<table cellspacing=2>
					<tr>
                                		<td>Start Date</td>      
						<td /><td><form:input path="start_date" /></td>
						<td /><td /><td />
                                		<td>End Date</td>
        					<td /><td><form:input path="end_date" /></td>
					</tr>
					<tr /><tr /><tr />
					<tr>
						
						<td>Sprint Name </td>
						<td />
						<td>
							<form:input path="sprint_name" />
						</td>
					</tr>
					<tr /><tr /><tr /><tr /><tr /><tr /><tr /><tr /><tr /><tr /><tr /><tr />
					<tr>
						<td /><td />
						<td><input type="submit" value="create"></td>
					</tr>
				</table>
				</form:form>
			</fieldset>
                        </div>
                </div>
		<div id="leftpanel">
			<div id="SprintBacklog">
                        	<h3>Sprint Backlog</h3>
                	</div>
       			<table class="body_scroll" cellspacing="5">
				<thead>
					<th>Sprint ID</th>
					<th>Sprint Name</th>
				</thead>

				<tbody>
					<c:forEach var="sprint" items="${sprintList}">
						<tr>
							<td><c:out value="${sprint.sprint_id}" /></td>
							<td>
								<a href="Storyboard1?sprint_id=${sprint.sprint_id}">
									<c:out value="${sprint.sprint_name}" />
								</a>
							</td>
						</tr>
					</c:forEach>	
				</tbody>
			</table>
		</div>		
	 	<div id="bottompanel">
			<form:form action="moveToSprint" method="POST">
				<div id="UnscheduledStory">
                                	<li>Unscheduled Story</li>
                                	<li>
						<select name="sprintId" style="float:right; width:8em;" onchange="submit()">
							<option  value="">Move To<option>
							<c:forEach var="sprint" items="${sprintList}">
								<option value='<c:out value="${sprint.sprint_id}" />'>
									<c:out value="${sprint.sprint_name}" />
								</option>
							</c:forEach>
						</select>
           				</li>
				</div>
				<table class="body_scroll" cellspacing="2">
                			<thead>
                        			<tr>
							<th>Select</th>
                                			<th>Story ID</th>
                                			<th>Story Name</th>
                        			</tr>
                			</thead>
                			<tbody>
						<c:forEach var="story" items="${storyList}">
						<tr>
                        			<td>
							<input type="checkbox" name="sList" value='<c:out value="${story.story_id}" />' />
						</td>
						<td>
							<c:out value="${story.story_id}" />
						</td>
						<td>
							<c:out value="${story.story_title}" />
						</td>
						</tr>
						</c:forEach>
                			</tbody>
        			</table>	
                	</div>
		</form:form>
	</div>
	<div id="footer">
	<p>Copyright &copy; 2014 - All Rights Reserved - Spring Computing Pvt. Ltd.</p>
	</div>
</body>
</html>
